// Page parameters
@glassy-font-size-base:       12px;

@glassy-border-radius-base:   2px;
@glassy-border-radius-large:  2px;
@glassy-border-radius-small:  2px;

@glassy-header-bg-color:      #ddd;
@glassy-header-mardin-btm:    55px;

@glassy-panel-bgcolor:        #fff;

// Mixin definitions

.shadow() {
  -pie-box-shadow: 0px 0px 2px #B2B2B2;
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 2px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
}

// General rules

.full-height {
  height: 100%;
}

.shadow {
  .shadow();
}

.border{
  border-color: #E4E4E4;
}

.header {
  background-color: @glassy-header-bg-color;

  &.main-header {
    margin-bottom: @glassy-header-mardin-btm;
  }
}

// Date picker position
span.yui-skin-sam {
  display: block;
  top: 6px;
  right: 26px;
  position: absolute;
}

// Page header
.headerPanel {
  height: 85px;

  // Home Link
  a.homePageLink {
    display: block;
    position: absolute;
    float: left;
    height: 102px;
    width: 72px;
    background: transparent url('../img/glassy_logo_header.png') no-repeat center center;
  }

  // Header search box
  .searchBox {
    display: inline-block;
  }

  // Header account box
  .accountBox {
    background-color: #F4F4F4;
    //display: inline-block;
    float: right;
    padding: 7px 0;
    width: 235px;
    overflow: hidden;

    .header-info {
      padding: 0 15px;
      border-left: 1px solid @text-muted;
      //width: 100%;
      overflow: hidden;

      &:first-child {
        float: left;
        border-left: 0;
      }
    }
  }
}

// Page footer
footer.glassy-footer {
  padding-top: 5px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  background: transparent url('../img/glassy_logo_footer.png') no-repeat center bottom;
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
}

// Glassy Panel
.glassy-panel {
  margin-bottom: @line-height-computed;
  background-color: @glassy-panel-bgcolor;
  .shadow();

  // Glassy panel header
  .header {
    padding: 1px 25px;
  }

  // Glassy panel content
  .panel-content {
    padding: 25px;
  }
}

// Used when two columns should be the same height
.align-column-height {
  overflow: hidden;

  .glassy-panel {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
}

// Movie List
movieListItem {
  movieImage {
    max-width: 100%;
  }
}

// Movie picture
.posterImage {
  max-width: 100%;
}